<!-- 微信浏览器 - 分享弹窗组件 -->
<template>
    <div class="wechat-share-popup">
        <!-- 圆角弹窗（底部） -->
        <van-popup v-model:show="popupVisible" round position="bottom">
            <div class="popup-content">
                <div class="popup-title">分享到</div>
                <div class="share-list">
                <div v-if="isWeChatBrowser()" class="share-box" @click="handleShare('weChat')">
                    <img class="box-icon" src="@/assets/images/mobile/appwx_logo.png" alt="" />
                    <div class="box-title">转发给微信</div>
                </div>
                <div class="share-box" @click="handleShare('link')">
                    <img class="box-icon" src="@/assets/images/mobile/copy-link.png" alt="" />
                    <div class="box-title">复制链接</div>
                </div>
                </div>
            </div>
        </van-popup>

        <!-- 引导用户点击微信右上角的分享遮罩层 -->
        <div class="wechat-share-mask" v-show="maskVisible" @click="maskVisible = false">
        <img class="share-arrow" src="@/assets/images/mobile/roll-line-arrow.png" alt="请点击右上角菜单按钮，并进行分享" />
        </div>
    </div>
</template>

<script setup lang="ts">
import { getWechatSDKConfig } from '@/api/modules/Mobile/weChat'
import { copyToClipboard, isWeChatBrowser } from '@/utils'
import { ElMessage } from 'element-plus'
import { ref } from 'vue'
import wx from 'weixin-js-sdk'

const popupVisible = ref(false)
const maskVisible = ref(false)

interface ShareInfo {
    link: string // 分享链接，该链接域名必须在当前页面对应的公众号JS安全域名列表中（仅需配置父域名即可，如：在安全域名中配置https://a.com，在这里可以写入 https://a.com/xxx/xxx ）
    title: string // 分享标题
    desc: string // 分享描述
    imgUrl: string // 分享图标，请使用类似于 https://xxx.png 这种网络图片路径
}
const shareInfo: ShareInfo = {
    title: '',
    desc: '',
    link: '',
    imgUrl: '' // `${location.origin}/logo.png`
}

// 初始化分享信息
const initShareInfo = (info: { title: string; link: string; desc?: string; imgUrl?: string }) => {
    shareInfo.title = info.title
    shareInfo.desc = info.desc || ''
    shareInfo.link = info.link
    shareInfo.imgUrl = info.imgUrl || `${location.origin}/logo.png`
    popupVisible.value = true
}
defineExpose({ initShareInfo })

// 处理分享事件
const handleShare = (type: 'weChat' | 'link') => {
    if (type == 'link') {
        copyToClipboard(shareInfo.link, false)
        ElMessage.success('复制成功，快去分享吧')
        popupVisible.value = false
    } else if (type == 'weChat') {
        handleWechatShare()
    }
}

// 微信分享
const handleWechatShare = async () => {
    // 1、向后端请求微信配置信息（目的是为了获取签名等信息 来初始化微信sdk的权限验证信息）
    let url = encodeURIComponent(location.href.split('#')[0])
    const res = await getWechatSDKConfig({ url })

    // 2、注入权限验证信息，初始化权限信息（目的是为了能够调用微信的相关api）
    wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: res.data.app_id, // 必填，公众号的唯一标识
        timestamp: res.data.timestamp, // 必填，生成签名的时间戳
        nonceStr: res.data.nonce_str, // 必填，生成签名的随机串
        signature: res.data.signature, // 必填，签名
        jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表
    })

    // 3、初始化微信自定义分享信息（目的是为了在用户点击右上角分享的时候，把分享的内容从链接 变成 自定义内容的卡片）
    initWechatShareData(shareInfo)
}

const initWechatShareData = (shareInfo: ShareInfo) => {
    // wx.config没有success回调事件，通过ready接口保证后续代码都是在config执行成功后再执行的；
    wx.ready(() => {
        // 自定义分享朋友信息
        wx.updateAppMessageShareData({
            ...shareInfo,
            success: () => {
                // 设置成功，现在用户点击右上角三个点进行分享时，可以分享出来卡片了
                popupVisible.value = false // 隐藏popup弹窗
                maskVisible.value = true // 引导用户点击右上角三个点菜单按钮
            }
        })
        // 自定义分享朋友圈信息
        wx.updateTimelineShareData({
            ...shareInfo,
            success: () => {
                // 设置成功，现在用户点击右上角三个点进行分享时，可以分享出来卡片了
            }
        })
    })

    // 通过error接口处理config失败的情况
    wx.error(function (res) {
        popupVisible.value = false // 隐藏popup弹窗
        ElMessage.error('分享失败，请稍后再试' + res.errMsg)
    })
}

// 判断设备OS类型
const getDeviceOS = () => {
    const userAgent = navigator.userAgent
    if (/android/i.test(userAgent)) {
        return 'Android'
    } else if (/iPad|iPhone|iPod/.test(userAgent)) {
        return 'IOS'
    } else {
        return 'unknown' // 无法确定或非移动操作系统
    }
}

// 复制文本内容到剪切板
const copyToClipboard = (text: string, isShowSuccessMsg: boolean = true): void => {
    if (!text.trim()) {
        ElMessage.warning('文本不存在')
        return
    }
    // 兼容非安全域，非安全域下不可使用navigator.clipboard.writeText
    if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard
        .writeText(text)
        .then(() => {
            isShowSuccessMsg &&
            ElMessage({
                message: '复制成功',
                type: 'success',
                duration: 1500
            })
        })
        .catch(() => {
            // console.error('复制失败：', error)
        })
    } else {
        const textarea = document.createElement('textarea')
        textarea.value = text
        document.body.appendChild(textarea)
        textarea.select()
        document.execCommand('copy')
        document.body.removeChild(textarea)
        isShowSuccessMsg && ElMessage({ message: '复制成功', type: 'success', duration: 1500 })
    }
}
</script>

<style scoped lang="scss">
.wechat-share-popup {
.popup-content {
    padding: 20px;
    margin-bottom: 50px;
    .popup-title {
    text-align: center;
    font-size: 16px;
    color: #333;
    margin-bottom: 20px;
    }

    .share-list {
    display: flex;
    justify-content: space-around;
    align-items: center;

    .share-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: 10px;
        cursor: pointer;

        &:hover {
        .box-title {
            color: var(--el-color-primary);
        }
        }

        .box-icon {
        width: 60px;
        height: 60px;
        }

        .box-title {
        font-size: 14px;
        color: #333;
        }
    }
    }
}
}

.wechat-share-mask {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 999;
background: rgba(0, 0, 0, 0.6);

.share-arrow {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 100vw;
    max-height: 80vh;
}
}
</style>